﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageCropping.ascx.cs" Inherits="Controls_ImageCropping" %>

<script type="text/javascript">
    //        Sys.Application.add_load(initSomething);
    //        function initSomething() {
    $(window).load(function () {
        /**************** Config ***************************/

        //Selector minWith
        var slminW = 280;
        //Selector minHeight
        var slminH = 150;
        //Selector maxWith
        var slmaxW = 280;
        //Selector maxHeight
        var slmaxH = 250;
        //maxZoom
        var maxZ = 150;
        //minZoom
        var minZ = 10;

        /***************** End Config ***********************/
        /* DO NOT CHANGE ANYTHING BELOW */

        var height = $(window).height();
        var width = $(document).width();
        $(".cropContainer").css({
            'left': width / 2 - ($(".cropContainer").width() / 2),  // half width - half element width
            'top': height / 2 - ($(".cropContainer").height() / 2 + 100) // similar                 
        });


        var link = $(".imgOriginal").attr('src');
        ///userupload/articles/634663029591190771.jpg           
        //alert(link);
        var imgW, imgH;
        if ($(".imgOriginal").width() != null) {
            imgW = $(".imgOriginal").width();
        }
        if ($(".imgOriginal").height() != null) {
            imgH = $(".imgOriginal").height();
        }
        var cropzoom = $('#crop_container').cropzoom({
            width: 500,
            height: 400,
            bgColor: '#CCC',
            enableRotation: false,
            enableZoom: true,
            zoomSteps: 5,
            rotationSteps: 90,
            selector: {
                centered: true,
                borderColor: 'blue',
                borderColorHover: 'red',
                maxWidth: slmaxW,
                maxHeight: slmaxH,
                //aspectRatio
                w: slminW,
                h: slminH
            },
            image: {
                source: link,
                width: imgW,
                height: imgH,
                snapToContainer: false,
                minZoom: minZ,
                maxZoom: maxZ                
            }
        });

        $("#butClose").click(function () {
            $(".clUpload").fadeOut(300);
        });

        $('#crop').click(function () {
            cropzoom.send('<%= KTFrameworkCus.Globals.ApplicationPath %>Ajax/dmsang.asmx/resizeImg', 'POST', {}, function (responseText) {
                var re = $(responseText);
                var imageurl = re.find('string').text();
                $(".KQ").attr('src', $('#<%= hdfilepath.ClientID %>').val() + imageurl + "?" + new Date());
                var height = $(window).height();
                var width = $(document).width();

                $(".imgKQ").css({
                    'left': width / 2 - ($(".imgKQ").width() / 2),  // half width - half element width
                    'top': height / 2 - ($(".imgKQ").height() / 2 + 50) // similar                 
                });
                $(".bgdim").css({
                    'top': 0,
                    'left': 0
                });
                $(".bgdim").fadeIn(200);
                $(".imgKQ").fadeIn(200);
            });
        });

        $("#deny").click(function () {
            $(".bgdim").fadeOut(200);
            $(".imgKQ").fadeOut(200);
        });

        $("#accept").click(function () {
            $(".bgdim").fadeOut(200);
            $(".imgKQ").fadeOut(200);
            $(".clUpload").fadeOut(200);
            $(".imgFinal").attr('src', $(".KQ").attr('src'));
            $(".spanImageUrl").html($(".KQ").attr('src'));
            //alert($(".KQ").attr('src'));
            $('#<%= HiddenField1.ClientID %>').val($(".KQ").attr('src'));


            //Delete Image
//            var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>Ajax/dmsang.asmx/removeImage";
//            $.ajax({
//                url: strURL,
//                type: 'POST',
//                data: "iamgename=" + link,
//                datatype: "Text",
//                success: function (msg) {
//                    var mess = $(msg).find('string').text();
//                }
//            });



        });

    });
 
        
</script>
<div class="bgdim" style="display: none; z-index: 999998; position: fixed; width: 100%;
    height: 100%; background-color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.3);">
</div>
<asp:HiddenField ID="hdfilepath" runat="server" />
<asp:Image ID="Image2" class="imgFinal" runat="server" Style="background-color: White;
    padding: 3px; border: solid 1px #ccc;" />
<asp:Button ID="Button1" runat="server" Text="Image Crop" OnClick="Button1_Click" />
<asp:Panel ID="Upload" CssClass="clUpload" runat="server" Visible="False">
    <div class="cropContainer" style="width: 500px; height: 450px; position: fixed; padding: 10px;
        border: solid 1px #ccc; background-color: #ffffff;">
        <div style="position: relative;">
            <div style="position: absolute; right: 0;">
                <input type="button" id="butClose" value="Đóng" />
            </div>
            <asp:FileUpload ID="PhotoFile" runat="server" />
            <asp:Button ID="btnupload" runat="server" Text="Upload" Width="89px" OnClick="btnupload_Click" />
        </div>
        <asp:Panel ID="Panel1" runat="server" Visible="False">
            <div id="dialogCrop" title="Result Cropping">
                <div id="crop_container">
                </div>
                <asp:Image ID="Image1" class="imgOriginal" runat="server" Style="display: none;" />
                <input type="button" style="float: left;" id="crop" value="Crop Image" />
                <div class="imgKQ" style="z-index: 999999; display: none; position: fixed;">
                    <asp:Image ID="Image3" CssClass="KQ" runat="server" Style="background-color: rgba(255, 255, 255, 0.2);color: rgba(255, 255, 255, 0.2); padding: 3px;" />
                    <input type="button" id="accept" value="Chấp nhận" />
                    <input type="button" id="deny" value="Cắt lại" />
                </div>
                <asp:HiddenField ID="HiddenField1" runat="server" EnableViewState="False" />
            </div>
        </asp:Panel>
    </div>
</asp:Panel>